<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar
          :is-back="false"
          :background="background"
          height="50"
          :border-bottom="false"
          title-color="#333"
        >
          <view class="slot-wrap">
            <view class="cus-back" @click="backView">
              <u-icon
                name="/static/goods-detail/back.png"
                size="36"
                color="#fff"
                class="uicon"
              ></u-icon>
              <view class="colooo"></view>
            </view>
          </view>
        </u-navbar>
        <view
          class="contentBg"
          :style="{
            backgroundImage: `url(${shopInfo.logo})`,
            filter: 'blur(10rpx)'
          }"
        >
        </view>
        <view class="mer-top">
          <view class="mer-info">
            <view class="mer-info-left">
              <image
                :src="shopInfo.logo"
                style="width: 80rpx; height: 80rpx"
                mode="aspectFit"
              ></image>
            </view>
            <view class="mer-info-right">
              <view class="mer-title dis-flex flex-y-between">
                <view style="margin-top: 10rpx">{{ shopInfo.name }}</view>
                <view class="follow" v-if="!shopInfo.follow" @click="onFollow">
                  <u-icon class="t-icon" name="/static/scsp.png" size="36"></u-icon>
                  <view>收藏</view>
                </view>
                <view class="follow" v-else @click="onFollow">
                  <u-icon class="t-icon" name="/static/scsp_xz.png" size="36"></u-icon>
                  <view>已收藏</view>
                </view>
              </view>
            </view>
          </view>
          <view class="store-des dis-flex flex-y-center">
            <view class="star dis-flex flex-y-center">
              <u-icon style="margin-bottom: 4rpx" name="/static/1.png" size="36"></u-icon>
              <text class="goods-star">{{ shopInfo.score }}分</text>
            </view>
            <view class="sale-item">
              <text>月销{{ shopInfo.salesCountPerMonth }}</text>
            </view>
            <!-- <view class="sale-item">
							<text>30分钟 </text>
						</view>
						<view class="sale-item">
							<text>2.9km</text>
						</view> -->
          </view>
          <view
            class="coupon-banner dis-flex flex-y-center flex-y-between"
            v-if="shopInfo.coupons && shopInfo.coupons.length > 0"
          >
            <view class="coupons">
              <view class="coupon-banner-item" v-for="(conpon, t) in shopInfo.coupons" :key="t">
                {{ conpon.name }}
              </view>
            </view>
            <view class="coupon-banner-more" @click="showCouponModel = true"> 更多优惠券></view>
          </view>
          <view class="store-content">
            <view class="houre dis-flex flex-y-center flex-y-between">
              <view class="dis-flex flex-y-center flex-y-between">
                <u-icon class="h-h-icon" name="/static/sj.png" size="28"></u-icon>
                <text>营业时间：{{ shopInfo.businessHours }}</text>
              </view>
              <u-icon
                @click="phone(shopInfo.contactMobile)"
                class="h-icon"
                name="/static/bh.png"
                size="32"
              ></u-icon>
            </view>
            <view class="houre dis-flex flex-y-center flex-y-between">
              <view class="address oneline-hide-1">
                <u-icon
                  style="position: relative; top: 6rpx"
                  class="h-h-icon"
                  name="/static/dw-h.png"
                  size="28"
                ></u-icon>
                <text>{{ shopInfo.detailAddress || '无' }}</text>
              </view>
              <u-icon
                @click="dhd(shopInfo.detailAddress)"
                class="h-icon"
                name="/static/dhd.png"
                size="32"
              ></u-icon>
            </view>
            <view class="postion" v-if="shopInfo.distance">距您{{ shopInfo.distance }}km</view>
          </view>
        </view>
      </view>

      <u-gap height="20"></u-gap>
      <u-tabs-swiper
        style="padding-right: 100rpx"
        ref="uTabs"
        :list="tabsList"
        :current="scurrent"
        @change="tabsChange"
        :is-scroll="false"
        :show-bar="false"
        height="90"
        active-color="#000"
        swiper-width="750"
      >
      </u-tabs-swiper>

      <swiper
        ref="swiper"
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[0]"
            @query="queryList"
            :fixed="false"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无数据"
            :empty-view-img-style="imgStyle"
            loading-more-no-more-text="没有更多数据了"
          >
            <view slot="left" class="rightView" style="background-color: #fff; margin-right: 10rpx">
              <scroll-view
                :scroll-y="true"
                class="scrollView"
                :style="{ height: scrollHeight }"
                :enhanced="true"
                :show-scrollbar="false"
              >
                <view class="menuView">
                  <view
                    class="using-hidden"
                    :class="menuIndex == index ? 'menuTab' : 'menuTab2'"
                    v-for="(item, index) in menuList"
                    :key="index"
                    @click="onMenuTab(index, item)"
                  >
                    {{ item.name }}
                  </view>
                </view>
              </scroll-view>
            </view>
            <!-- <view class="headView">
							<view :class="sortIndex==0?'sortTab2':'sortTab'" @click="onSortTab(0)">
								{{menuList[menuIndex] ? menuList[menuIndex].name : '店家推荐' }}
							</view>
						</view> -->
            <view
              class="goodsItemView dis-flex"
              v-for="(item, index) in itemList[0]"
              :key="index"
              @click="onDetails(item)"
            >
              <view class="dis-flex">
                <u-image width="180" height="180" :src="item.picUrl" border-radius="8"></u-image>
                <view class="itemInfo flex-1">
                  <view class="dis-flex flex-column">
                    <view class="itemTitle oneline-hide-1">{{ item.name }}</view>
                    <view class="sales">月售{{ item.salesCountPerMonth }}</view>
                    <view class="point-rule dis-flex">
                      <view class="price">
                        <text class="t">原价:¥</text>
                        <text class="n">{{ item.priceYuan }}</text>
                      </view>
                    </view>
                  </view>
                  <view class="goods_tip dis-flex flex-y-between">
                    <view class="vip-price">
                      <text class="t">会员价:¥</text>
                      <text class="n">{{ item.vipPriceYuan }}</text>
                    </view>
                  </view>
                  <view class="point-rule" v-if="item.skus[0].pointDeductCount">
                    {{ item.skus[0].pointDeductCount }}积分抵¥{{
                      item.skus[0].pointDeductPriceYuan
                    }}
                  </view>
                  <view class="type dis-flex flex-y-between" v-if="item.cryptocurrencyDeductCount">
                    <view class="demo-shop">
                      <view class="points" style="font-size: 24rpx; color: #ff6f10">
                        {{ item.cryptocurrencyDeductCount }}豆抵扣{{
                          item.cryptocurrencyDeductPriceYuan
                        }}元
                      </view>
                    </view>
                  </view>
                </view>
                <view
                  class="dis-flex flex-x-end"
                  style="padding: 20rpx"
                  @click.stop.prevent="addToCar(item)"
                >
                  <u-icon
                    v-if="!item.specType"
                    :class="[`add-cart-${item.id}`]"
                    class="uicon"
                    size="40"
                    name="/static/add-y.png"
                  ></u-icon>
                  <text v-else class="uicon uicon-1" style="margin-right: 15rpx">选规格</text>
                </view>
              </view>
            </view>
            <view style="height: 150rpx"></view>
          </z-paging>
        </swiper-item>

        <swiper-item class="swiperItem groupbox">
          <z-paging
            ref="paging1"
            v-model="itemList[1]"
            @query="queryList"
            :fixed="false"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无数据~"
            :empty-view-img-style="imgStyle"
            loading-more-no-more-text="没有更多数据了"
          >
            <view
              class="groupItemView"
              @click="toCombGoods(item, gindex)"
              v-for="(item, gindex) in itemList[1]"
              :key="gindex"
            >
              <view class="dis-flex">
                <view class="store-image">
                  <u-image :src="item.picUrl" mode="" width="180rpx" height="180rpx"></u-image>
                </view>
                <view style="padding-left: 20rpx; flex: 1">
                  <view class="goods_title oneline-hide">
                    {{ item.name }}
                  </view>
                  <view class="dis-flex flex-x-center flex-y-between" style="padding: 10rpx 0">
                    <view class="miaosu">
                      <text v-for="(des, d) in item.guidanceFormat" :key="d"
                        >{{ formatDes(des, d) }}
                      </text>
                    </view>
                    <text class="sales">已售{{ item.salesCount }}</text>
                  </view>

                  <view
                    class="point-rule"
                    v-if="item.skus && item.skus[0] && item.skus[0].pointDeductCount"
                  >
                    {{ item.skus[0].pointDeductCount }}积分抵¥{{
                      item.skus[0].pointDeductPriceYuan
                    }}
                  </view>
                  <view class="goods_tip dis-flex flex-x-center flex-y-between">
                    <view class="dis-flex flex-column flex-y-center">
                      <view class="price">
                        <text class="t">原价:¥</text>
                        <text class="n">{{ (item.price * 0.01).toFixed(2) }}</text>
                      </view>
                      <view class="vip-price">
                        <text class="t">会员价:¥</text>
                        <text class="n">{{ (item.vipPrice * 0.01).toFixed(2) }}</text>
                      </view>
                    </view>
                    <view class="bt">抢</view>
                  </view>
                </view>
              </view>
              <u-gap height="12"></u-gap>
              <u-line color="#C1C0C9"></u-line>
            </view>

            <u-gap height="180"></u-gap>
          </z-paging>
        </swiper-item>

        <swiper-item class="swiperItem">
          <z-paging
            ref="paging2"
            v-model="itemList[2]"
            @query="queryList"
            :fixed="false"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无数据~"
            :empty-view-img-style="imgStyle"
            loading-more-no-more-text="没有更多数据了"
          >
            <view class="comment-top" slot="top">
              <view class="count dis-flex">
                <text class="count-l star">{{ shopInfo.score }}</text>
                <u-rate
                  class="count-r"
                  v-model="shopInfo.scoreLevel"
                  disabled
                  active-color="#FBC258"
                  inactive-color="#CCCCCC"
                  size="36"
                  gutter="10"
                ></u-rate>
              </view>
              <view class="count dis-flex">
                <text class="count-l des">商家评分</text>
                <view class="count-r dis-flex" v-if="shopInfo && shopInfo.commentCount">
                  <view
                    class="type"
                    :class="commentType == 0 ? 'checked' : ''"
                    @click="onChangeType(0)"
                    >全部{{ shopInfo.commentCount.allCount }}
                  </view>
                  <view
                    class="type"
                    :class="commentType == 1 ? 'checked' : ''"
                    @click="onChangeType(1)"
                    >好评{{ shopInfo.commentCount.positiveCount }}
                  </view>
                  <view
                    class="type"
                    :class="commentType == 3 ? 'checked' : ''"
                    @click="onChangeType(3)"
                    >差评{{ shopInfo.commentCount.negativeCount }}
                  </view>
                  <view
                    class="type"
                    :class="commentType == 4 ? 'checked' : ''"
                    @click="onChangeType(4)"
                    >有图{{ shopInfo.commentCount.hasPictureCount }}
                  </view>
                </view>
              </view>
            </view>
            <view class="comment-area" v-if="itemList[2] && itemList[2].length > 0">
              <view class="comment-box" v-for="(item, cindex) in itemList[2]" :key="cindex">
                <view class="comment-info dis-flex flex-y-center">
                  <u-avatar style="margin-right: 10rpx" src="" size="70"></u-avatar>
                  <view class="info-left-username">
                    <view class="name">{{ item.user.nickname }}</view>
                    <view class="date">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd') }}</view>
                  </view>
                </view>
                <view class="comment-star dis-flex">
                  <view class="">
                    <u-rate
                      v-model="item.scores"
                      disabled
                      active-color="#FBC258"
                      inactive-color="#CCCCCC"
                      size="31"
                      gutter="10"
                    ></u-rate>
                  </view>
                  <text class="comment-star-text" v-if="item.scores == 5">非常满意</text>
                  <text class="comment-star-text" v-if="item.scores == 4">满意</text>
                  <text class="comment-star-text" v-if="item.scores == 3">一般</text>
                  <text class="comment-star-text" v-if="item.scores == 2">不满意</text>
                  <text class="comment-star-text" v-if="item.scores == 1">非常不满意</text>
                </view>
                <view class="">
                  <view class="comment-content dis-flex flex-wrap">
                    <text v-if="item.spuName" style="color: #0f76bc">@{{ item.spuName }}</text>
                    <text
                      v-if="item.skuProperties && item.skuProperties.length > 0"
                      style="color: #0f76bc"
                      >#{{ item.skuProperties[0].valueName }}
                    </text>
                    <text v-if="item.content" style="margin-left: 10rpx">{{ item.content }}</text>
                  </view>
                  <view class="comment-img" v-if="item.picUrls && item.picUrls.length > 0">
                    <view class="image" v-for="(pic, i) in item.picUrls" :key="i">
                      <u-image
                        :src="pic"
                        mode=""
                        border-radius="8"
                        width="216rpx"
                        height="145rpx"
                      ></u-image>
                    </view>
                  </view>
                </view>
              </view>
              <view class="" style="height: 300rpx"></view>
            </view>
          </z-paging>
        </swiper-item>

        <!-- <swiper-item class="swiperItem">
					<scroll-view class="scroll-y-class" scroll-y="true" @touchmove.stop.prevent>
						<view class="store-box">
							<view class="card address-1">
								<text class="add">商家地址：</text>
								<text v-if="shopInfo.fullAddress">{{shopInfo.fullAddress}} </text>
								<text v-else>{{shopInfo.provinceCityCounty}}{{shopInfo.detailAddress}} </text>
							</view>
							<u-gap height="20"></u-gap>
							<view class="card jiankang">
								<view class="jk-top dis-flex flex-y-between">
									<view class="card-tl">实时监控画面：</view>
									<view>监控回放</view>
								</view>
								<view class="jk-video dis-flex flex-y-between">
									<view class="dt">
										<u-image class="image" src="" border-radius="10" width="345rpx"
											height="200rpx"></u-image>
										<view class="dt-text">后厨监控画面</view>
									</view>
									<view class="dt  ">
										<u-image class="image" src="" border-radius="10" width="345rpx"
											height="200rpx"></u-image>
										<view class="dt-text">大厅监控画面</view>
									</view>
								</view>
							</view>
							<u-gap height="20"></u-gap>
							<view class="card images">
								<view class="card-tl">商家环境</view>
								<u-swiper :list="bannerList" height="367"></u-swiper>
							</view>
							<view class="footer-fill"></view>
						</view>

					</scroll-view>
				</swiper-item> -->
      </swiper>
    </z-paging-swiper>

    <u-popup v-model="showCouponModel" mode="bottom" width="750" height="750" border-radius="20">
      <view class="popup-box">
        <view class="couponTl dis-flex flex-y-between flex-y-center">
          <view class="tl">优惠折扣券</view>
          <u-icon name="/static/close-t.png" size="36" @click="showCouponModel = false"></u-icon>
        </view>
        <scroll-view scroll-y="true" style="height: 650rpx">
          <view class="couponListView">
            <view class="couponView" v-for="(item, cIndex) in shopInfo.coupons" :key="item.id">
              <view class="moneyView" v-if="item.discountType == 1">
                <view class="couponMoney"
                  >¥
                  <text>{{ (item.discountPrice * 0.01).toFixed(0) }}</text>
                </view>
                <view class="couponTips">满减券</view>
              </view>
              <view class="moneyView" v-if="item.discountType == 2">
                <view class="couponMoney">
                  <text>{{ item.discountPercent }}</text>
                  %
                </view>
                <view class="couponTips">折扣券</view>
              </view>
              <view class="lineView">
                <view class="circle"></view>
                <view class="line"></view>
                <view class="circle2"></view>
              </view>
              <view class="couponInfoView dis-flex flex-y-between flex-y-center">
                <view class="info dis-flex flex-y-between">
                  <view class="couponTitle">{{ item.name }}</view>
                  <view class="couponLabel">店铺券</view>
                  <view class="InfoView">
                    <view class="couponTime" v-if="item.validityType == 1">
                      有效日期{{ formatTime(item.validEndTime) }}
                    </view>
                    <view class="couponTime" v-else>自领取后{{ item.fixedEndTerm }}天有效</view>
                  </view>
                </view>
                <view
                  class="couponBtn"
                  v-if="!item.isReceive && item.takeType == 1"
                  @click="receiveCoupon(item, cIndex)"
                  >领取
                </view>
                <view class="couponBtn disabled" v-else-if="item.takeType != 1">不可领</view>
                <view class="couponBtn disabled" v-else>已领取</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <!-- --start-- 购物车弹窗 -->

    <u-popup
      v-model="showSpecModel"
      backgroundColor="transparent"
      bgColor="transparent"
      mode="center"
      width="500rpx"
      height="auto"
      border-radius="30"
    >
      <view class="tishi-box">
        <view class="content" v-if="goodsInfo">
          <view class="goods-detail">
            <view class="name">{{ goodsInfo.name }}</view>
            <view class="spec">
              <view class="tl">规格：</view>
              <view class="spec-list">
                <view
                  class="spec-item"
                  v-for="(spec, specIndex) in goodsInfo.uniapp.spec_list"
                  :key="specIndex"
                >
                  <text style="margin-right: 20rpx; font-size: 24rpx; color: #666666"
                    >{{ spec.name }}
                  </text>
                  <text
                    v-for="(_spec, _specIndex) in spec.list"
                    :key="_specIndex"
                    class="text"
                    :class="_spec.checked ? 'checked' : ''"
                    @click="checkSpecItem(specIndex, _specIndex)"
                    >{{ _spec.name }}
                  </text>
                </view>
              </view>
            </view>
            <view class="check-item"
              >已选规格:
              <text v-if="checkedSpecItem">{{ checkedSpecItem.sku_name_arr.join(',') }}</text>
              <text v-else>请选择</text>
            </view>
            <view class="const dis-flex flex-y-center">
              <view class="">
                原价:¥
                <text class="bold" v-if="checkedSpecItem"
                  >{{ (checkedSpecItem.price * 0.01).toFixed(2) }}
                </text>
                <text v-else>-.-</text>
              </view>
              <view class="vip-price"
                >会员价:¥
                <text class="bold" v-if="checkedSpecItem && goodsInfo.skus[checkedSpecItemIndex]"
                  >{{ (goodsInfo.skus[checkedSpecItemIndex].vipPrice * 0.01).toFixed(2) }}
                </text>
                <text v-else>-.-</text>
              </view>
            </view>
            <view class="goods-point dis-flex flex-y-between">
              <view
                v-if="
                  checkedSpecItem &&
                  goodsInfo.skus[checkedSpecItemIndex] &&
                  goodsInfo.skus[checkedSpecItemIndex].pointDeductCount
                "
                class="point"
              >
                {{ goodsInfo.skus[checkedSpecItemIndex].pointDeductCount }}积分抵¥{{
                  goodsInfo.skus[checkedSpecItemIndex].pointDeductPriceYuan
                }}
              </view>
            </view>
            <view class="goods-cryptocurrency dis-flex flex-y-between">
              <view
                v-if="
                  checkedSpecItem &&
                  goodsInfo.skus[checkedSpecItemIndex] &&
                  goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductCount
                "
                class="cryptocurrency"
              >
                {{ goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductCount }}收益豆抵¥{{
                  goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductPriceYuan
                }}
              </view>
            </view>
            <view class="bottom dis-flex flex-y-between">
              <view v-if="checkedSpecItem" @click="addToCartSpec()" class="add-card">确认</view>
              <view v-else @click="addToCartSpec()" class="add-card disabled">确认</view>
              <view @click="colseSpecModle()" class="add-card" style="background-color: gray"
                >取消
              </view>
            </view>
          </view>
        </view>
        <text v-else>没有获取到商品数据</text>
      </view>
    </u-popup>

    <u-popup
      v-model="showCardModel"
      @close="closeCarList"
      mode="bottom"
      width="100%"
      height="800rpx"
      border-radius="30"
    >
      <view class="car-box">
        <view class="car-tl dis-flex flex-y-between flex-x-center">
          <view class="tl-l">
            <text>购物车</text>
            <text style="color: #999999; font-size: 24rpx">共{{ carList.length }}样商品</text>
          </view>
          <view
            v-if="carList.length > 0"
            class="clear dis-flex flex-y-center"
            @click="clearCarList()"
          >
            <text>清空购物车</text>
          </view>
          <view
            v-else
            class="dis-flex flex-y-center"
            style="padding: 10rpx"
            @click="showCardModel = false"
          >
            <u-icon name="/static/close-t.png" size="30"></u-icon>
          </view>
        </view>
        <view class="car-list">
          <scroll-view v-if="carList.length > 0" :scroll-y="true" style="height: 550rpx">
            <view class="itemView" v-for="(item, index) in carList" :key="item.id">
              <view class="dis-flex" style="position: relative">
                <u-image width="90" height="90" :src="item.picUrl" border-radius="8"></u-image>
                <view class="itemInfo">
                  <view class="dis-flex flex-x-end">
                    <view class="itemTitle oneline-hide-1">{{ item.name }}</view>
                    <view style="font-size: 24rpx; color: #999999; margin-left: 10rpx">
                      <text v-for="(item2, i) in item.sku.properties" :key="i"
                        >{{ item2.valueName + (i === item.sku.properties.length - 1 ? '' : ',') }}
                      </text>
                    </view>
                    <view class="flex-1"></view>
                    <u-icon
                      @click="delCartItem(item)"
                      name="/static/sc.png"
                      style="margin-right: 10rpx"
                      size="30"
                    >
                    </u-icon>
                  </view>
                  <view class="dis-flex">
                    <view class="point-rule dis-flex flex-column">
                      <view class="price">
                        <text class="t">原价:¥</text>
                        <text class="n">{{ item.priceYuan }}</text>
                      </view>
                      <view class="vip-price">
                        <text class="t">会员价:¥</text>
                        <text class="n">{{ item.vipPriceYuan }}</text>
                      </view>
                    </view>
                    <view class="uicon numberBox">
                      <u-number-box
                        v-model="item.count"
                        :index="index"
                        :min="0"
                        :disabled-input="false"
                        @change="onCartCont(item)"
                        @minus="onCartCont(item)"
                        @plus="onCartCont(item)"
                      ></u-number-box>
                    </view>
                  </view>
                </view>
                <view v-if="item.invalid" class="cant-check">
                  <text> {{ item.invalidReason }}</text>
                  <view class="flex-1"></view>
                  <text class="del" @click="delCartItem(item)">删除</text>
                </view>
              </view>
            </view>
            <u-gap height="45"></u-gap>
          </scroll-view>
          <view v-else class="nomore">暂无商品</view>
        </view>
      </view>
    </u-popup>

    <view v-if="scurrent === 0 && carList.length > 0" class="fixed-wapper" style="z-index: 99999">
      <view class="bt-box dis-flex">
        <view class="other dis-flex flex-y-between flex-y-center">
          <view class="count dis-flex flex-y-center" style="flex: 1" @click="showCarList">
            <view class="count-icon">
              <u-icon name="/static/gwc-tm.png" style="margin-top: 10rpx" size="48"></u-icon>
              <u-badge
                v-if="carList.length > 0"
                type="error"
                size="mini"
                :count="carList.reduce((a, b) => a + b.count, 0)"
                :offset="[0, -20]"
              ></u-badge>
            </view>
            <text v-if="countPrice && !isNaN(countPrice)" class="count-text"
              >¥{{ (countPrice * 0.01).toFixed(2) }}
            </text>
            <!-- <text class="deliver-price">预估配送费3元</text> -->
          </view>
          <view @click="submit" class="submit-btn"> 去下单</view>
        </view>
      </view>
    </view>

    <view
      v-for="item in anims"
      :key="item.key"
      class="add-btn-radio"
      style="position: fixed; transition: transform 0.5s linear"
      :style="{
        top: `${item.top}px`,
        left: `${item.left}px`,
        transform: `translate(${item.x}px, ${item.y}px)`
      }"
    >
      <u-icon size="32" name="/static/add-y.png"></u-icon>
    </view>

    <!-- --end-- 购物车弹窗 -->
  </view>
</template>

<script>
import QQMapWX from '@/common/qqmap-wx-jssdk.min'

export default {
  data() {
    return {
      showCouponModel: false,
      // --start-- 购物车弹窗
      goodsInfo: null,
      showCardModel: false,
      showSpecModel: false,
      carList: [],
      checkedSpecItem: null,
      checkedSpecItemIndex: null,
      shecedSpecList: [],
      countPrice: 0,
      anims: [],
      // --end-- 购物车弹窗
      anims: [],
      disable: false,
      bannerList: [],
      imgStyle: {
        width: '12rem'
      },
      skuInfo: {},
      iconStyle: {
        width: '50rpx',
        height: '50rpx'
      },
      titleStyle: {
        fontSize: '28rpx'
      },
      backStyle: {
        width: '25px',
        fontSize: '14px',
        height: '25px',
        background: '#3333337a',
        position: 'absolute',
        borderRadius: '50%',
        color: 'transparent'
      },
      shopInfo: {},
      scrollHeight: '800rpx',
      userShow: false,
      scurrent: 0,
      checkCate: {
        id: ''
      },
      tabsList: [
        {
          name: '品类'
        },
        {
          name: '套餐'
        },
        {
          name: '评论'
        }
        /*, {
										name: '商家'
									}*/
      ],
      itemList: [[], [], []],
      userInfo: '',
      menuIndex: 0,
      menuList: [],
      shopId: '',
      price_order: '',
      sale_order: '',
      sortIndex: '',
      checkedCate: '',
      tcurrent: 0,
      skuMode: 3,
      isFollow: false,
      background: {
        background: 'transparent'
      },
      count: 3,
      commentType: 0
    }
  },
  computed: {
    formatTime: function () {
      return (e) => this.$utils.parseTime(e)
    }
  },
  onLoad(e) {
    this.shopId = e.id || '1915697490670272514'
    this.loadShopInfo()
    this.tabsChange(e.tab || 0)
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
    console.debug('userInfo', this.userInfo)
    if (this.scurrent === 0) {
      this.loadCartList()
    }
  },
  methods: {
    backView() {
      this.$utils.goToHome()
    },
    loadShopInfo() {
      this.$u
        .get('/app-api/shop/info/get', {
          id: this.shopId
        })
        .then((res) => {
          const data = res.data
          if (data.categoryCode === 'food') {
            uni.redirectTo({
              url: '/dine/diancan/diancanv2?shopId=' + data.id
            })
          } else if (data.categoryCode === 'mall') {
            uni.redirectTo({
              url: '/shops/store?shopId=' + data.id
            })
          }
          if (this.$latitude && this.$longitude) {
            data.distance = this.calculateDistance(
              this.$latitude,
              this.$longitude,
              data.latitude,
              data.longitude
            )
          }
          this.shopInfo = data
        })
    },
    callPhone() {
      // #ifdef H5
      uni.showToast({
        icon: 'none',
        title: 'H5不支持拨打电话'
      })
      // #endif
      // #ifndef H5
      uni.makePhoneCall({
        phoneNumber: shopInfo.contactMobile
      })
      // #endif
    },
    openLocation() {
      uni.openLocation({
        latitude: this.shopInfo.latitude,
        longitude: this.shopInfo.longitude
      })
    },
    formatDes(item, index) {
      let text = index == 0 ? item : ' · ' + item
      return text
    },
    calculateDistance(lat1, lon1, lat2, lon2) {
      const radians = (degree) => degree * (Math.PI / 180)
      const R = 6371 // 地球平均半径，单位为千米
      const dLat = radians(lat2 - lat1)
      const dLon = radians(lon2 - lon1)
      lat1 = radians(lat1)
      lat2 = radians(lat2)
      const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2)
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
      const d = (R * c).toFixed(1)
      return d
    },
    onMenuTab(index, e) {
      this.menuIndex = index
      this.checkedCate = e
      this.tcurrent = 0
      this.$refs.paging.reload()
    },
    receiveCoupon(item, index) {
      this.$u.api
        .postCouponTake({
          templateId: item.id
        })
        .then((res) => {
          if (res.code === 0) {
            this.$u.toast('领取成功')
            this.shopInfo.coupons[index].isReceive = 1
          } else {
            this.$u.toast(res.msg)
          }
        })
    },
    // --start-- 购物车弹窗
    toLogin() {
      this.$utils.goToLogin('/other/merchant-center/merchant-center?id=' + this.shopId)
    },
    onCartCont(item) {
      const app = this
      app.$u.throttle(function () {
        app.$u.api
          .putCartCount({
            id: item.carId || item.id,
            count: item.count
          })
          .then((res) => {
            if (res.code === 0) {
              if (item.count === 0) {
                app.delCartItem(item)
              } else {
                app.loadCartList()
              }
            } else {
              app.$u.toast(res.msg)
            }
          })
      }, 200)
    },
    delCartItem(item) {
      const app = this
      app.$u.get('/app-api/trade/cart/delete?ids=' + item.carId).then((res) => {
        if (res.code === 0) {
          app.$u.toast('移除成功')
          app.loadCartList()
        } else {
          app.$u.toast(res.msg)
        }
      })
    },
    clearCarList() {
      this.$u
        .get('/app-api/trade/cart/deleteByShopId', {
          shopId: this.shopId
        })
        .then((res) => {
          if (res.code === 0) {
            this.$u.toast('清空成功')
            this.carList = []
            this.onTotalPrice()
          } else {
            this.$u.toast(res.msg)
          }
        })
    },
    loadCartList() {
      const app = this
      app.$u.api
        .getCartList({
          shopId: app.shopId
        })
        .then((res) => {
          if (res.data && res.data.length > 0) {
            app.carList = res.data[0].items.map((it) => ({
              id: it.id,
              carId: it.id,
              count: it.count,
              skuId: it.sku.id,
              price: it.sku.price,
              priceYuan: (it.sku.price * 0.01).toFixed(2),
              name: it.spu.name,
              picUrl: it.spu.picUrl,
              sku: it.sku,
              invalid: it.invalid,
              vipPrice: it.sku.vipPrice,
              vipPriceYuan: (it.sku.vipPrice * 0.01).toFixed(2),
              invalidReason: it.invalidReason
            }))
          } else {
            app.carList = []
          }
          app.onTotalPrice()
        })
    },
    onTotalPrice() {
      if (this.carList.length == 0) {
        this.countPrice = 0
        return
      }
      let total = 0
      for (const carItem of this.carList) {
        total += carItem.price * carItem.count
      }
      this.countPrice = total
    },
    checkSpecItem(index, valueIndex) {
      let spec = this.goodsInfo.uniapp.spec_list[index]
      let value = this.goodsInfo.uniapp.spec_list[index].list[valueIndex]
      let newList = []
      spec.list.forEach((_spec, i) => {
        if (valueIndex == i) {
          _spec.checked = true
        } else {
          _spec.checked = false
        }
        newList.push(_spec)
      })
      this.goodsInfo.uniapp.spec_list[index].list = newList
      const existingIndex = this.shecedSpecList.findIndex((item) => item.name === spec.name)
      if (existingIndex !== -1) {
        this.shecedSpecList.splice(existingIndex, 1)
      }
      const newSpec = {
        name: spec.name,
        value: value.id
      }
      this.shecedSpecList.push(newSpec)
      if (this.shecedSpecList.length == this.goodsInfo.uniapp.spec_list.length) {
        this.goodsInfo.uniapp.sku_list.forEach((sku) => {
          sku.isThis = sku.spec_value_ids.every((item) =>
            this.shecedSpecList.some((checked) => checked.value === item)
          )
          if (sku.isThis) {
            this.checkedSpecItem = sku
            let skuIndex = this.goodsInfo.skus.findIndex(
              (sku) => sku.id === this.checkedSpecItem._id
            )
            this.checkedSpecItemIndex = skuIndex
          }
        })
      }
    },
    showCarList() {
      if (this.showCardModel) {
        this.showCardModel = false
      } else {
        this.showCardModel = true
        this.loadCartList()
      }
    },
    showSpecList(item) {
      item.uniapp.spec_list.forEach((spec) => {
        spec.list.forEach((_spec) => {
          _spec.checked = false
        })
      })
      this.showSpecModel = true
      this.goodsInfo = item
    },
    addToCartSpec() {
      if (!this.checkedSpecItem) {
        this.$u.toast('请选择规格')
        return
      }
      let goods = this.$utils.deepClone(this.goodsInfo)
      let skuIndex = this.goodsInfo.skus.findIndex((sku) => sku.id === this.checkedSpecItem._id)
      let sku = goods.skus[skuIndex]
      goods.skus[0] = sku
      this.addToCart(goods)
      this.colseSpecModle()
    },
    colseSpecModle() {
      this.showSpecModel = false
      this.checkedSpecItem = null
      this.shecedSpecList = []
    },
    addToCar(item = undefined) {
      if (!item) {
        item = this.goodsInfo
      }
      if (item.skus.length > 1) {
        this.showSpecList(item)
      } else {
        this.addToCart(item)
      }
    },
    addToCart(item) {
      if (!this.userInfo) {
        this.toLogin()
        return
      }
      if (this.disable) {
        return
      }
      this.disable = true
      let skuId = item.skus[0].id || item.skus[0]._id
      let carItem = {
        count: 1,
        skuId: skuId,
        priceYuan: item.skus[0].priceYuan,
        id: item.id,
        name: item.name,
        picUrl: item.picUrl,
        sku: item.skus[0],
        vipPriceYuan: item.skus[0].vipPriceYuan
      }
      this.playAnim(item.id)
      let self = this
      self.$u.api
        .setCartAdd(carItem)
        .then(() => {
          this.disable = false
          self.$u.toast('添加成功')
          self.loadCartList()
        })
        .catch(() => {
          this.disable = false
        })
    },
    closeCarList() {
      this.loadCartList()
    },
    playAnim(itemId) {
      const key = itemId
      this.anims.push({
        key,
        id: itemId,
        left: 0,
        top: 0,
        y: 0,
        x: 0
      })
      // 获取点击元素的节点信息
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(`.add-cart-${itemId}`)
          .boundingClientRect((e) => {
            // 初始化起始位置
            const currentAnim = this.anims.find((citem) => citem.key === key)
            if (currentAnim) {
              currentAnim.top = e.top
              currentAnim.left = e.left
              // 设置目标位置
              currentAnim.y = uni.getSystemInfoSync().windowHeight - e.top - 50
              currentAnim.x = -uni.getSystemInfoSync().windowWidth * 0.78
              setTimeout(() => {
                // 等待动画执行完毕移除元素
                this.anims.splice(
                  this.anims.findIndex((v) => v.key === key),
                  1
                )
              }, 500)
            }
          })
          .exec()
      })
    },
    submit() {
      if (this.carList.length === 0) {
        this.$u.toast('请先加购商品')
        return
      }
      let items = []
      this.carList.forEach((item) => {
        if (!item.invalid) {
          items.push({
            cartId: item.carId || item.id
          })
        }
      })
      if (items.length === 0) {
        this.$u.toast('加购的商品已失效')
        return
      }
      this.$utils.route(
        {
          url: 'goods/order-confirm/order-confirm',
          params: {
            items: JSON.stringify(items)
          }
        },
        true
      )
    },
    // --end-- 购物车弹窗
    tabsChange(index) {
      this.scurrent = Number(index)
      if (this.scurrent === 0) {
        this.loadCategryList()
      } else if (this.scurrent === 1 || this.scurrent === 2) {
        this.queryList(1)
      }
      if (this.scurrent !== 0) {
        // 若不是第一个选项，即不是品类选项，则不加载购物车数据
        return
      }
      this.loadCartList()
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = Number(e.detail.current)
      this.scurrent = Number(e.detail.current)
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.itemList[this.scurrent].length > 0) {
        return
      }
      this.tabsChange(this.scurrent)
    },
    onChangeType(type) {
      this.commentType = type
      this.$refs.paging2.reload()
    },
    loadCategryList() {
      this.$u
        .get('/app-api/product/category/list', {
          shopId: this.shopId
        })
        .then((res) => {
          this.menuList = res.data
          this.checkedCate = this.menuList[0]
          this.queryList(1)
        })
        .catch(() => {
          uni.stopPullDownRefresh()
          this.$refs.paging.complete(false)
        })
    },
    queryList(pageNo = 1, pageSize = 10) {
      if (this.scurrent === 0) {
        this.$u
          .get('/app-api/product/spu/page-by-product-category', {
            // shopId: this.shopId,
            categoryId: this.menuList[this.menuIndex].id,
            status: 1,
            pageNo,
            pageSize
          })
          .then((res) => {
            this.$refs.paging.complete(res.data.list)
          })
          .catch(() => {
            uni.stopPullDownRefresh()
            this.$refs.paging.complete(false)
          })
        return
      }
      if (this.scurrent === 1) {
        this.$u
          .get('/app-api/promotion/groupon-package/list', {
            shopId: this.shopId,
            status: 1,
            pageNo,
            pageSize
          })
          .then((res) => {
            this.$refs.paging1.complete(res.data)
          })
          .catch(() => {
            uni.stopPullDownRefresh()
            this.$refs.paging1.complete(false)
          })
        return
      }
      if (this.scurrent === 2) {
        this.$u
          .get('/app-api/product/comment/page', {
            type: this.commentType,
            shopId: this.shopId,
            pageNo,
            pageSize
          })
          .then((res) => {
            this.$refs.paging2.complete(res.data.list)
          })
          .catch(() => {
            uni.stopPullDownRefresh()
            this.$refs.paging2.complete(false)
          })
      }
    },
    phone(phone) {
      // #ifdef H5
      uni.dialog.alert('电话：' + phone)
      // #endif
      // #ifndef H5
      uni.makePhoneCall({
        phoneNumber: phone
      })
      // #endif
    },
    jisuanjuli() {
      let qqmapsdk = new QQMapWX({
        key: 'I4LBZ-HVX3Z-5TAXS-ZCQ5B-KX546-EWBLX'
      })
      //wx.getFuzzyLocation()方法获取的只是所在地区的经纬度，
      //获取所在地区的具体城市信息还需要进行逆地址解析
      qqmapsdk.calculateDistance({
        from: `'${this.$latitude},${this.$longitude}'`,
        to: `'${this.shopInfo.latitude},${this.shopInfo.longitude}'`,
        success: (res) => {
          console.log('calculateDistance', res)
        },
        fail: (err) => {
          console.log(err)
        }
      })
    },
    dhd(address) {
      uni.openLocation({
        latitude: Number(this.shopInfo.latitude), //要去的纬度
        longitude: Number(this.shopInfo.longitude), //要去的经度
        address: address //要去的具体地址
      })
    },
    onSortTab(index) {
      this.sortIndex = index
      if (index == 0) {
        this.sale_order = ''
        this.price_order = ''
      }
      if (index == 1) {
        if (this.sale_order == 'ASC') {
          this.sale_order = 'DESC'
        } else {
          this.sale_order = 'ASC'
        }
        this.price_order = ''
      }
      if (index == 2) {
        if (this.price_order == 'ASC') {
          this.price_order = 'DESC'
        } else {
          this.price_order = 'ASC'
        }
        this.sale_order = ''
      }
      this.$refs.paging.reload()
    },
    toCombGoods(item, index) {
      this.$utils.route({
        url: '/goods/comb-goods/comb-goods?combId=' + item.id + '&shopId=' + item.shopId
      })
    },
    onDetails(item) {
      this.$utils.route({
        url: '/goods/goods-details/goods-details?goodsId=' + item.id + '&shopId=' + item.shopId
      })
    },
    onFollow(item) {
      uni.$u
        .post('/app-api/shop/favorite/toggle', {
          shopId: this.shopInfo.id
        })
        .then((res) => {
          if (res.code === 0) {
            let msg = this.shopInfo.follow ? '已取消' : '收藏成功'
            this.$u.toast(msg)
            this.shopInfo.follow = !this.shopInfo.follow
          } else {
            this.$u.toast(res.msg)
          }
        })
    },
    play(item) {
      uni.navigateTo({
        url:
          '/other/video-play/video-play?videoList=' +
          JSON.stringify([item]) +
          '&play=' +
          JSON.stringify(item)
      })
    }
  }
}
</script>
<style scoped lang="scss">
page {
  // background: #F7F7F7;
  height: 100vh;
}

.container {
  height: 100vh;
}

@import url('@/style/btn.css');

.scroll-y-class {
  height: 100%;
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 380rpx;
}

.mer-top {
  width: 100%;
  margin-top: 150rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx 20rpx 20rpx 20rpx;
  position: relative;

  .mer-info {
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    &-left {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &-right {
      flex: 1;
      position: relative;
      margin-left: 10rpx;

      .mer-title {
        font-size: 34rpx;
      }

      .follow {
        font-size: 24rpx;
        color: #333333;
        text-align: center;
      }
    }
  }

  .store-des {
    margin-bottom: 20rpx;

    .star {
      font-size: 36rpx;
      margin-right: 30rpx;

      .goods-star {
        margin-left: 10rpx;
      }
    }

    .sale-item {
      font-size: 26rpx;
      color: #666666;
      margin-right: 30rpx;
    }
  }

  .coupon-banner {
    background-color: #fff;
    position: relative;
    margin-bottom: 20rpx;

    .coupons {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      flex: 1;
      height: 50rpx;
      // margin: 18rpx 0;
    }

    &-item {
      padding: 5rpx 20rpx;
      border: 2rpx solid #f54831;
      font-size: 20rpx;
      color: #fa453c;
      border-radius: 35rpx;
      margin-right: 15rpx;
      margin-bottom: 20rpx;
    }

    &-more {
      font-size: 20rpx;
      color: #999999;
    }
  }

  .store-content {
    font-size: 26rpx;
    color: #333333;

    .houre {
      margin-bottom: 15rpx;

      // flex: 1;
      .h-h-icon {
        margin-right: 10rpx;
        margin-bottom: 2rpx;
      }
    }

    .h-icon {
      margin-left: 10rpx;
    }

    .postion {
      font-size: 26rpx;
      color: #999999;
      margin-left: 40rpx;
      margin-top: -10rpx;
    }
  }

  .tabsView {
    background-color: #fff;
  }
}

.rightView {
  width: 180rpx;
  height: 100%;
  // background: #F7F7F7;
}

.scrollView {
  display: flex;
  flex-direction: column;
  width: 180rpx;
  height: 100%;
}

.menuView {
  display: flex;
  flex-direction: column;
}

.menuTab {
  height: 110rpx;
  line-height: 110rpx;
  background: #d7f5f1;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #10a28f;
  position: relative;
}

.menuTab2 {
  height: 110rpx;
  line-height: 110rpx;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.menuTab::after {
  content: '';
  position: absolute;
  border-right: 6rpx solid #10a28f;
  height: 40rpx;
  right: 0;
  top: 35rpx;
}

.headView {
  display: flex;
  align-items: center;
  position: sticky;
  background: #fff;
  z-index: 100;
  height: 80rpx;
  top: 0px;
}

.sortTab {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  padding: 0px 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}

.sortTab2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 80rpx;
  text-align: center;
  padding: 0px 20rpx;
  font-size: 28rpx;
  color: #333333;
  // color: #22B857;
}

.mer-rate-left {
  flex: 3;
  text-align: center;

  view {
    font-size: 45rpx;
    font-weight: 700;
  }

  p {
    color: #666666;
  }
}

.mer-rate-right {
  flex: 7;
  margin-top: 20rpx;

  text {
    font-size: 35rpx;
  }

  .rate-tip {
    padding: 5rpx 10rpx;
    color: #ffac0e;
    background-color: #f5f0e6;
  }
}

.comment-box {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 2rpx;

  .comment-info {
    overflow: auto;
    margin: 15rpx 0;

    .info-left-username {
      .name {
        font-size: 24rpx;
        color: #333333;
      }

      .date {
        font-size: 20rpx;
        color: #999999;
      }
    }
  }

  .comment-star {
    display: flex;
    align-items: center;

    .comment-star-text {
      font-size: 24rpx;
      color: #333333;
      margin-left: 10rpx;
    }
  }

  .comment-content {
    margin-top: 20rpx;
    font-size: 22rpx;
    color: #333333;
    line-height: 36rpx;
  }

  .comment-img {
    margin-top: 10rpx;

    .image {
      margin-top: 10rpx;
    }
  }
}

.txt1 {
  font-size: 35rpx;
  float: left;
}

.txt2 {
  float: right;
  color: #7e7e5e;
}

.comment-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.video-area {
  &-box {
    float: left;
    width: 33%;
    height: 400rpx;

    .video-area-cover {
      width: 100%;
      height: 100%;
    }
  }
}

.allSelectedView {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.itemType {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #22b857;
  margin-left: 10rpx;
}

.itemType2 {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #ff9711;
  margin-left: 10rpx;
}

.itemType3 {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #fd2cac;
  margin-left: 10rpx;
}

.itemTime {
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  margin-left: 10rpx;
}

.errorTitle {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #666666;
}

.itemDetele {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.allHead {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemAddView {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 50rpx;
  margin-top: 8rpx;
}

.itemMoney {
  font-size: 22rpx;
  font-weight: 400;
  color: #ff4242;
  height: 34rpx;
  line-height: 34rpx;
  padding: 0px 10rpx;
  text-align: center;
  background: #feecec;
  border-radius: 5rpx;
  margin-right: 10rpx;
}

.itemTitle {
  font-size: 28rpx;
  color: #333333;
}

.itemTitle text {
  color: #ff4242;
}

.itemAdd {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemAdd text {
  font-size: 22rpx;
  font-weight: 400;
  color: #333333;
  margin-right: 5rpx;
}

.goodsView {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
  position: relative;
}

.goodsBg {
  width: 100%;
  height: 150rpx;
  background: #ffffff70;
  position: absolute;
  z-index: 100;
  top: 0px;
}

.selectedView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  margin-left: -40rpx;
}

.goodsData {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.goodsTitle {
  font-size: 26rpx;
  font-weight: 500;
  color: #333333;
}

.goodsSku {
  font-size: 24rpx;
  font-weight: 500;
  color: #999999;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.goodsPrice {
  flex: 1;
  font-size: 26rpx;
  font-weight: 400;
  color: #ff2323;
}

.goodsPrice text {
  font-size: 32rpx;
  font-weight: 400;
  color: #ff2323;
}

.numberBox {
  border: 1px solid transparent;
}

.imageView {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150rpx;
  height: 150rpx;
  position: relative;
}

.groupbox {
  background-color: #fff;
  // padding: 30rpx 20rpx;
  width: 100%;
}

.groupItemView {
  padding: 30rpx 20rpx 10rpx 20rpx;

  .store-image {
    position: relative;
  }

  .goods_title {
    font-size: 28rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 6rpx;
  }

  .miaosu {
    font-size: 24rpx;
    color: #666666;
  }

  .sales {
    font-size: 24rpx;
    color: #999999;
  }

  .point-rule {
    font-size: 24rpx;
    color: #ff6f10;
    margin: 6rpx 0;
  }

  .goods_tip {
    .price {
      color: #333333;
      margin-right: 20rpx;
    }

    .vip-price {
      color: #fa453c;
    }

    .t {
      font-size: 26rpx;
    }

    .n {
      font-size: 32rpx;
      font-weight: 600;
    }

    .bt {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      background: #10a28f;
      border-radius: 25rpx;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
    }
  }
}

.comment-top {
  width: 750rpx;
  height: 150rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 20rpx 0 20rpx 0;
  display: flex;
  flex-flow: column;
  justify-content: space-between;

  .count {
    align-items: center;

    .count-l {
      width: 180rpx;
      text-align: center;
    }

    .count-r {
      .type {
        background: #ffffff;
        border-radius: 6rpx;
        border: 1px solid #e6e6e6;
        padding: 4rpx 10rpx;
        font-size: 20rpx;
        color: #666666;
        margin-right: 20rpx;
      }

      .checked {
        background: #f5e7e6;
        color: #fa453c;
      }
    }

    .star {
      font-weight: 600;
      font-size: 48rpx;
      color: #333333;
    }

    .des {
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.card {
  background-color: #fff;
  padding: 20rpx;
}

.card-tl {
  font-weight: 600;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 30rpx;
}

.address-1 {
  color: #333333;
  font-size: 28rpx;
  padding: 37rpx 20rpx;

  .add {
    color: #666666;
  }
}

.jiankang {
  .jk-top {
    font-size: 28rpx;
    color: #999999;
  }

  .dt {
    text-align: center;

    .dt-text {
      font-size: 28rpx;
      color: #333333;
      margin-top: 20rpx;
    }
  }
}

.slot-wrap {
  display: flex;
  align-items: center;
  padding-left: 20rpx;

  .cus-back {
    position: relative;
    text-align: center;

    .uicon {
      z-index: 99;
      position: relative;
      font-weight: 100;
    }

    .colooo {
      width: 56rpx;
      height: 56rpx;
      background: #000000;
      border-radius: 50%;
      opacity: 0.5;
      position: absolute;
      top: -10rpx;
      left: -10rpx;
    }
  }
}

.popup-box {
  .couponTl {
    padding: 0 20rpx;
    height: 100rpx;
    background: #f5f5f5;
  }

  .couponListView {
    padding: 30rpx 20rpx;

    .couponView {
      display: flex;
      height: 161rpx;
      margin-bottom: 19rpx;

      .moneyView {
        background-color: #10a28f;
        width: 160rpx;
        color: #ffffff;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;

        .couponMoney {
          font-size: 36rpx;
          margin-bottom: 10rpx;

          text {
            font-size: 56rpx;
            font-weight: 600;
          }
        }

        .couponTips {
          font-size: 24rpx;
        }
      }

      .couponInfoView {
        flex: 1;
        background: #ffffff;
        border-radius: 8rpx;
        border: 1px solid #e6e6e6;
        margin-left: -15rpx;
        padding: 20rpx;

        .info {
          height: 100%;
          flex-flow: column;
          flex: 1;

          .couponTitle {
            font-size: 30rpx;
            color: #333333;
          }

          .couponLabel {
            font-size: 20rpx;
            color: #fa453c;
            border-radius: 20rpx;
            border: 1px solid #fa453c;
            padding: 2rpx 0;
            width: 109rpx;
            text-align: center;
            // height: 40rpx;
            // line-height: 40rpx;
          }

          .couponTime {
            font-size: 20rpx;
            color: #999999;
          }
        }

        .couponBtn {
          width: 96rpx;
          height: 48rpx;
          background: #10a28f;
          border-radius: 23rpx;
          font-size: 26rpx;
          color: #ffffff;
          line-height: 48rpx;
          text-align: center;
        }
      }

      .lineView {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        margin-left: -15rpx;
        height: 161rpx;
        position: relative;

        .circle {
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
          background: #fff;
          margin-top: -15rpx;
          border: 1px solid #e6e6e6;
        }

        .circle2 {
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
          background: #fff;
          margin-bottom: -15rpx;
          border: 1px solid #e6e6e6;
        }

        .line {
          flex: 1;
          width: 1rpx;
          /* 设置元素的宽度 */
          background-color: #e6e6e6;
          /* 左边虚线 */
        }
      }
    }
  }
}

.goodsItemView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 20rpx 20rpx 0 20rpx;
  margin-bottom: 1rpx;
}

// --start-- 购物车弹窗

.itemView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 20rpx 20rpx 0 20rpx;
  margin: 0 20rpx 20rpx;
}

.itemInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10rpx;
  position: relative;
  padding-bottom: 20rpx;

  .point-rule {
    font-size: 24rpx;
    color: #ff6f10;
    align-items: center;
  }

  .sales {
    font-size: 24rpx;
    color: #999999;
  }

  .price {
    color: #333333;
  }

  .vip-price {
    color: #fa453c;
  }

  .t {
    font-size: 26rpx;
  }

  .n {
    font-size: 32rpx;
    font-weight: 600;
  }

  .uicon {
    position: absolute;
    right: 0;
    bottom: 20rpx;
  }

  .uicon-1 {
    width: 96rpx;
    background: #10a28f;
    border-radius: 10rpx;
    font-size: 24rpx;
    color: #ffffff;
    text-align: center;
    padding: 2rpx 0;
  }
}

.itemText {
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemPrice {
  font-size: 20rpx;
  font-weight: 400;
  color: #ff3616;
  margin-right: 10rpx;
}

.itemPrice2 {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff2323;
  margin-right: 10rpx;
}

.itemOPrice {
  font-size: 24rpx;
  font-weight: 400;
  text-decoration: line-through;
  color: #c2c2c2;
}

.car-box {
  .car-tl {
    width: 750rpx;
    height: 100rpx;
    background: #f5f5f5;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    padding: 0 20rpx;

    .tl-l {
      line-height: 100rpx;
    }

    .clear {
      font-size: 26rpx;
      color: $uni-color-primary;
    }
  }

  .car-list {
    padding: 20rpx;

    .nomore {
      padding-top: 100rpx;
      text-align: center;
      color: #999999;
    }

    .numberBox {
      bottom: -4rpx;
    }
  }
}

.tishi-box {
  position: relative;
  display: flex;
  flex-flow: column;

  .content {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
  }
}

.goods-detail {
  .name {
    font-size: 28rpx;
    font-weight: bold;
    color: #666666;
    text-align: center;
  }

  .spec {
    margin-top: 30rpx;

    .tl {
      font-size: 24rpx;
    }

    .spec-list {
      margin-top: 20rpx;

      .spec-item {
        margin-bottom: 20rpx;
      }

      .text {
        height: 50rpx;
        background: #ffffff;
        border-radius: 10rpx;
        border: 1px solid #e6e6e6;
        line-height: 50rpx;
        padding: 10rpx 40rpx;
        margin-right: 20rpx;
      }

      .checked {
        background: #10a28f;
        color: #fff;
        border: 1px solid #10a28f;
      }

      .text:last-child {
        margin-right: 0;
      }
    }
  }

  .check-item {
    font-size: 24rpx;
    color: #999999;
    margin-top: 29rpx;
  }

  .const {
    font-size: 26rpx;
    margin-top: 30rpx;

    .point,
    .vip-price {
      color: #ff6f10;
      margin-left: 15rpx;
    }
  }

  .bottom {
    font-size: 26rpx;
    color: #fa453c;
    margin-top: 30rpx;
    padding: 10rpx 30rpx;

    .add-card {
      width: 200rpx;
      height: 60rpx;
      background: #10a28f;
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 60rpx;
      text-align: center;
    }
  }

  .bold {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.goods-point {
  align-items: center;

  .point {
    margin-top: 5rpx;
    font-size: 26rpx;
    color: #ff6f10;
  }
}

.cryptocurrency {
  margin-top: 5rpx;
  font-size: 26rpx;
  color: #ff6f10;
}

.fixed-wapper {
  width: 100%;
  background-color: #fff;
  left: 0;
  z-index: 999;

  .bt-box {
    height: 96rpx;
  }

  .other {
    width: 92%;
    background: #333333;
    border-radius: 40rpx;
    margin-left: 4%;
    height: 80rpx;
    margin-top: 8rpx;

    .count {
      font-weight: 600;
      font-size: 36rpx;
      color: #ffffff;
      padding-left: 50rpx;

      .count-text {
        margin-left: 40rpx;
      }

      .deliver-price {
        font-size: 24rpx;
        margin-left: 20rpx;
        font-weight: 400;
      }

      .count-icon {
        position: relative;
      }
    }

    .submit-btn {
      width: 200rpx;
      right: 0;
      border-radius: 0rpx 40rpx 40rpx 0rpx;
    }
  }
}

.cant-check {
  position: absolute;
  background-color: rgba(102, 102, 102, 0.5);
  height: 110%;
  font-size: 46rpx;
  font-weight: 600;
  color: #fff;
  left: 0;
  right: 0;
  top: -5%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50rpx;

  .del {
    width: 150rpx;
    height: 60rpx;
    background: $uni-color-primary;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 60rpx;
    text-align: center;
  }
}

// --end-- 购物车弹窗

.disabled {
  background: #cccccc !important;
}

.swiperView {
  /* #ifdef MP-WEIXIN */
  margin-top: -20rpx;
  /* #endif */
  /* #ifdef H5 */
  margin-top: 20rpx;
  /* #endif */
}
</style>
